<template>
  <div>
    <el-button size="small" :icon="Plus" type="primary" @click="selectOrg" round>选择抄送人</el-button>
    <div class="option">
      <el-checkbox label="允许发起人添加抄送人" v-model="config.shouldAdd"></el-checkbox>
    </div>
    <org-items v-model="select" />
    <org-picker multiple ref="orgPicker" type="org" :selected="select" @ok="selected"/>
  </div>
</template>

<script>
import OrgPicker from '/@/views/setting/workflow/process/OrgPicker.vue'
import OrgItems from "/@/views/setting/workflow/process/OrgItems.vue";
import { Plus } from '@element-plus/icons-vue'
import { computed, ref, toRefs } from 'vue';
export default {
    name: 'CcNodeConfig',
    components: { 
        OrgPicker, 
        OrgItems 
    },
    props: {
        config: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    setup(props, context) {
        const { config } = toRefs(props)
        const orgPicker = ref()
        const select = computed({
            get: () => {
                return config.value.assignedUser || []
            },
            set: val => {
                config.value.assignedUser = val
            }
        })
        const selectOrg = () => {
            orgPicker.value.show()
        }
        const selected = (select) => {
            console.log(select)
            select.value = Object.assign([], select)
        }
        const removeOrgItem = (index) => {
            select.value.splice(index, 1)
        } 
        return {
            Plus,
            select,
            orgPicker,
            selectOrg,
            selected,
            removeOrgItem
        }
    }
}
</script>

<style scoped lang="scss">
.option {
  color: #606266;
  margin-top: 20px;
  font-size: small;
}
.desc {
  font-size: small;
  color: #8c8c8c;
}
.org-item {
  margin: 5px;
}
</style>